<template>
  <div>
    <div ref="chartColumn" class="mapBox">
      <div class="mapPop2">暂无企业</div>
    </div>
    <div class="map_overall">
      <div><img src="~img/ssgs_icon.png" alt="" /></div>
      <div>
        <div class="map_overall_title">产业园数量</div>
        <div class="map_overall_num">{{ total }}</div>
      </div>
    </div>
    <div class="my-card-center">
      <div class="k">企业数量分布（户数）</div>
      <div style="display: flex">
        <div class="color" />
        <div class="vv">
          <div class="v">90,000</div>
          <div class="v">80,000</div>
          <div class="v">70,000</div>
          <div class="v">60,000</div>
          <div class="v">50,000</div>
        </div>
      </div>
    </div>
    <div ref="pop">
      <div class="mapPop" style="width: 333px; padding: 20px">
        <div v-for="(item, index) in popsList.children" :key="index">
          <div
            class="mapPop_title"
            style="
              width: 100%;
              height: 27px;
              background: linear-gradient(
                90deg,
                #2981ee 0%,
                rgba(27, 67, 184, 0.1) 100%
              );
              font-size: 24px;
              color: #ffffff;
              font-family: YouSheBiaoTiHei;
              line-height: 27px;
              padding-left: 10px;
              margin-top: 10px;
            "
          >
            {{ item.cpcc }}
          </div>
          <div v-for="(itm, indx) in item.children" :key="indx">
            <div
              class="mapPop_small_title"
              style="color: #e0f8ff; font-weight: bold; margin-top: 15px"
            >
              {{ itm.cpmc }}
            </div>
            <div
              v-for="(it, ind) in itm.children"
              :key="ind"
              class="mapPop_contant"
              style="color: #7cdffb; margin-top: 10px"
            >
              {{ it.cpxf }}
              <span class="mapPop_contant2" style="color: white">{{
                it.num
              }}</span>
              <span style="font-size: 14px">家企业</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ref="pop2"></div>
  </div>
</template>
<script>
import { queryAreaDistribution } from "@/api/screen/qyfb";
import { area } from "./SuZhou.js";
export default {
  name: "" /*1. Vue扩展 */,
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {} /* 2. Vue数据 */,
  props: {
    mapPopList: {
      type: Array,
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      popsList: [],
      mouseovearea: "",
      total: "",
      geoCoordMap: [
        {
          name: "吴中区",
          value: [120.3971099, 31.232765, 200],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "相城区",
          value: [120.601043, 31.4802088, 160],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "姑苏区",
          value: [120.602416, 31.3043684, 100],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "工业园区",
          value: [120.75347, 31.3677, 200],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "高新区",
          value: [120.3840637, 31.3723991, 160],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "吴江区",
          value: [120.60585, 30.9787865, 160],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "常熟市",
          value: [120.74852, 31.658156, 200],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "张家港市",
          value: [120.621643, 31.9195301, 200],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "昆山市",
          value: [120.958137, 31.381925, 200],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
        {
          name: "太仓市",
          value: [121.184692, 31.5949131, 100],
          itemStyle: {
            color: "#FFF3CE",
          },
        },
      ],
    };
  },
  computed: {},
  watch: {} /* 3. Vue资源 */, // watch 监控的是 props 和 data，有必要时监控computed
  filters: {},
  directives: {} /* 4. Vue生命周期 */,
  created() {},
  mounted() {
    this.echartsInit();
  },
  destroy() {} /* 5. Vue方法 */,
  methods: {
    echartsInit() {
      const _this = this;
      let myChart = this.$echarts.init(this.$refs.chartColumn);
      this.$echarts.registerMap("jiangsu", area);

      var goData = [
        {
          name: "吴中区",
          value: 90,
        },
        {
          name: "相城区",
          value: 0,
        },
        {
          name: "姑苏区",
          value: 50,
        },
        {
          name: "工业园区",
          value: 50,
        },
        {
          name: "高新区",
          value: 0,
        },
        {
          name: "吴江区",
          value: 90,
        },
        {
          name: "常熟市",
          value: 50,
        },
        {
          name: "张家港市",
          value: 0,
        },
        {
          name: "昆山市",
          value: 90,
        },
        {
          name: "太仓市",
          value: 50,
        },
      ];

      var series = [];
      [
        ["", goData],
        // ['徐州', backData],
      ].forEach((item, i) => {
        series.push(
          {
            type: "map",
            mapType: "jiangsu",
            aspectScale: 0.85,
            layoutCenter: ["50%", "52%"], //地图位置
            layoutSize: "90%",
            zlevel: 0,
            zoom: 1, //当前视角的缩放比例 // roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              // 文字hover颜色
              emphasis: {
                show: true, //是否在高亮状态下显示标签。
                textStyle: {
                  color: "#fff",
                }, //高亮状态下的标签文本样式。
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#12235c",
                borderColor: "#CFE9FB",
                borderWidth: 3,
                shadowColor: "#95DCFD",
                shadowBlur: 15,
              },
              emphasis: {
                areaColor: "#F06765",
                label: {
                  color: "#fff",
                },
              },
            },
            data: goData,
          },

          {
            name: "",
            type: "effectScatter",
            coordinateSystem: "geo",

            // symbolSize:50, //function (val) {
            //     var a = (maxSize4Pin - minSize4Pin) / (max - min);
            //     var b = minSize4Pin - a*min;
            //     b = maxSize4Pin - a*max;
            //     return a*val[2]+b;
            // },
            symbolSize: function (value) {
              return 1;
            },
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                  fontSize: 4,
                },

                formatter: function (value) {
                  return value.value[2];
                },
                emphasis: {
                  show: true,
                },
              },
            },
            rippleEffect: {
              period: 1, // 动画时间，值越小速度越快
              scale: 25, // 波纹圆环最大限制，值越大波纹越大
              brushType: "fill", // 波纹绘制方式 stroke, fill
            },

            zlevel: 1000,

            data: this.geoCoordMap,
          }
        );
      });
      var type = {
        type: "map",
        map: "jiangsu",
        geoIndex: 0,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        data: goData,
      };
      series.unshift(type);
      let option = {
        backgroundColor: "",
        textStyle: {
          color: "#fff",
        },
        confine: true,
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0,50,99,0.65)",
          borderColor: "rgba(0,129,255,1)",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontFamily: "SourceHanSansCN",
          },

          formatter: function (e) {
            _this.popsList = [];
            _this.mapPopList.forEach((element) => {
              if (e.data.name == element.area) {
                _this.popsList = element;
              }
            });

            if (_this.popsList.children) {
              return _this.$refs.pop;
            } else {
              return _this.$refs.pop2;
            }
          },
        },
        visualMap: {
          show: false,
          type: "piecewise",
          pieces: [
            {
              max: 30,
              label: "",
              color: "#5AD6EE",
            },
            {
              min: 30,
              max: 60,
              label: "",
              color: "#3B9EF9",
            },
            {
              min: 89,
              label: "",
              // color: "#2BDC70",
              color: "#1F7BF5",
            },
          ],
          color: "#fff",
          textStyle: {
            color: "#fff",
          },
          visibility: "off",
        },
        //地图相关设置
        geo: {
          map: "jiangsu",
          aspectScale: 0.85,
          layoutCenter: ["50%", "52%"],
          //地图位置
          layoutSize: "90%",
          itemStyle: {
            normal: {
              shadowColor: "#396CB4",
              shadowOffsetX: 0,
              shadowOffsetY: 20,
              opacity: 0.9,
            },
            emphasis: {
              areaColor: "#276fce",
            },
          },
        },
        series: series,
      };
      myChart.setOption(option);
      let that = this;
      myChart.on("mousemove", function (params) {
        that.isAnimation = true;
        // that.tableData.forEach((e) => {
        //   if (e.name == params.name) {
        //     that.activeMap = e;
        //   }
        // });
      });
      myChart.on("mouseover", function (e) {
        // setTimeout(function () {
        //   _this.mouseovearea = e.data.name;
        //   queryAreaDistribution({
        //     mainIndustry: "电子信息",
        //     belongsToSector: e.data.name,
        //   }).then((response) => {
        //     let data = response.rows;
        //     // ======================
        //     let needList = [];
        //     const keysList = Object.keys(data[0]);
        //     console.log(keysList,'keysList')
        //     keysList.forEach((val, index) => {
        //       if (index === 0) {
        //         const list = [...new Set(data.map((pre) => pre[val]))];
        //         list.forEach((val1) => {
        //           needList.push({
        //             name: val1,
        //             children: [],
        //           });
        //         });
        //       }
        //       if (index === 1) {
        //         // const list1 = [...new Set(data.map((pre) => pre[val]))];
        //         needList.forEach((val2) => {
        //           const list = data.filter(
        //             (pre) => pre[keysList[index - 1]] === val2.name
        //           );
        //           const list2 = [...new Set(list.map((pre) => pre[val]))];
        //           list2.forEach((val3) => {
        //             val2.children.push({
        //               name: val3,
        //               children: [],
        //             });
        //           });
        //         });
        //       }
        //       if (index === 2) {
        //         needList.forEach((val1) => {
        //           val1.children.forEach((val2) => {
        //             const list = data.filter(
        //               (pre) => pre[keysList[index - 1]] === val2.name
        //             );
        //             list.forEach((val3) => {
        //               val2.children.push({
        //                 name: val3[[keysList[index]]],
        //                 num: val3[[keysList[index + 1]]],
        //               });
        //             });
        //           });
        //         });
        //       }
        //     });
        //     _this.popsList = needList;
        //     console.log(_this.popsList, "popsListpopsList");
        //   });
        // }, 1001);
      });
      myChart.on("mouseout", function (params) {});
      myChart.on("click", function (params) {
        that.$emit("mapSelected", params);
      });
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.mapBox {
  width: 100%;
  height: 100%;
  //   background-color: red;
}

.my-card-center {
  position: absolute;
  bottom: 0%;
  right: 0px;
  // left: -40px;
  .k {
    color: #1ed7fe;
    font-size: 20px;
    font-family: YouSheBiaoTiHei;
    margin-bottom: 16px;
  }
  .vv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .v {
      color: #d7f4ff;
      font-size: 16px;
      width: 60px;
      text-align: right;
    }
  }
  .color {
    width: 13px;
    height: 126px;
    background: linear-gradient(180deg, #1b78f4, #3087fb, #4ec7f4, #60ddec);
    border-radius: 4px;
  }
}
@keyframes rotate-word {
  0% {
    opacity: 0;
    filter: blur(0px);
  }

  5% {
    opacity: 1;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
.v {
  margin-top: 5px;
}
// ============
.mapPop {
  width: 383px;
  // height: 554px;
  // background-color: red;
}
.mapPop2 {
  width: 150px;

  text-align: center;
}
.map_overall {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 79px;
  right: 20px;
  background: linear-gradient(-33deg, #1e3288 0%, #00246a 100%);
  img {
    width: 45px;
  }
}
.map_overall_title {
  font-size: 12px;
  color: #68c8fa;
}
.map_overall_num {
  color: #fff;
  font-family: YouSheBiaoTiHei;
  font-size: 28px;
}
</style>
